<!DOCTYPE html>
<html>
    <head>
        <title>simplegrid</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js"></script>
        <script src="../highlight/shCore.js">

        </script>
        <script>
            avalon.config({debug: false})
            require(["simplegrid/avalon.simplegrid"], function() {
                function range(s, b) {
                    return s + Math.floor((b - s) * Math.random())
                }
                var createData = function(n) {
                    var array = []
                    for (var i = 0; i < n; i++) {
                        array.push({
                            state: i % 2 === 0,
                            budget: range(3000, 6000),
                            emerge: range(70000, 200000),
                            click: range(3000, 50000),
                            consume: range(8000, 20000),
                            clickprice: (1 + 3 * Math.random()).toFixed(2)
                        })
                    }
                    return array
                }

                avalon.define("test", function(vm) {

                    vm.simplegrid = {
                        columns: [
                            {field: "state", text: "状态", resizable: true, align: "center", width: 80},
                            {field: "budget", text: "预算", resizable: true},
                            {field: "emerge", text: "展现", resizable: true},
                            {field: "click", text: "点击", resizable: true},
                            {field: "consume", text: "消费", resizable: true},
                            {field: "clickprice", text: "平均点击价格", resizable: true}
                        ],
                        renderCell: function(val, name) {
                            switch (name) {
                                case  "budget":
                                case "clickprice":
                                    return val + "￥"
                                case "state":
                                    return val ? "√" : "×"
                                default:
                                    return val
                            }
                        },
                        showRows: 10,
                        pageable: true,
                        pager: {
                            perPages: 20,
                            totalItems: 1000,
                            showPages: 5,
                            options: [10, 20, 30, 40]
                        },
                        columnsOrder: ["state", "budget", "emerge", "click", "consume", "clickprice"],
                        data: createData(100)
                    }
                    vm.$skipArray = ["simplegrid"]
                })
                avalon.scan()
            })
        </script>

    </head>
    <body>

        <fieldset ms-controller="test">
            <legend>演示renderCell的使用</legend>

            <div ms-widget="simplegrid" style="width:99%">

            </div>
            <div>
              
                <pre class="brush:html;gutter:false;toolbar:false;">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;simplegrid&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;script src="../avalon.js"&gt;&lt;/script&gt;

        &lt;script&gt;
            avalon.config({debug: false})
            require(["simplegrid/avalon.simplegrid"], function() {
                function range(s, b) {
                    return s + Math.floor((b - s) * Math.random())
                }
                var createData = function(n) {
                    var array = []
                    for (var i = 0; i &lt; n; i++) {
                        array.push({
                            state: i % 2 === 0,
                            budget: range(3000, 6000),
                            emerge: range(70000, 200000),
                            click: range(3000, 50000),
                            consume: range(8000, 20000),
                            clickprice: (1 + 3 * Math.random()).toFixed(2)
                        })
                    }
                    return array
                }

                avalon.define("test", function(vm) {

                    vm.simplegrid = {
                        columns: [
                            {field: "state", text: "状态", resizable: true, align: "center", width: 80},
                            {field: "budget", text: "预算", resizable: true},
                            {field: "emerge", text: "展现", resizable: true},
                            {field: "click", text: "点击", resizable: true},
                            {field: "consume", text: "消费", resizable: true},
                            {field: "clickprice", text: "平均点击价格", resizable: true}
                        ],
                        renderCell: function(val, name) {
                            switch (name) {
                                case  "budget":
                                case "clickprice":
                                    return val + "￥"
                                case "state":
                                    return val ? "√" : "×"
                                default:
                                    return val
                            }
                        },
                        showRows: 10,
                        pageable: true,
                        pager: {
                            perPages: 20,
                            totalItems: 1000,
                            showPages: 5,
                            options: [10, 20, 30, 40]
                        },
                        columnsOrder: ["state", "budget", "emerge", "click", "consume", "clickprice"],
                        data: createData(100)
                    }
                    vm.$skipArray = ["simplegrid"]
                })
                avalon.scan()
            })
        &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
       &lt;div ms-controller="test" ms-widget="simplegrid" style="width:99%"&gt;
       &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

                </pre>
            </div>
        </fieldset>

    </body>
</html>
